<!--学习路线图-->
<template>
        <div id="main" style="width:1000px;height:600px;margin: 10px auto;"></div>
</template>
<script>
    import request from "../utils/request";

    const echarts = require('echarts');
    var ecStat = require('echarts-stat');

    export default{
        data () {
            return {
                search: '',
                currentPage: 1,
                pageSize: 20,
                total: 0,
                data0: [],
                links: [],
            };
        },
        created() {

        },
        methods: {
            initCharts () {
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;


                    request.get("/course",{ // 请求/scatterClustering接口
                            params: {
                                    pageNum: this.currentPage,
                                    pageSize: this.pageSize,
                                    search: this.search
                            }
                    }).then(res=>{
                            // console.log(res);

                            this.data0=[];
                            this.links=[];

                            for (var i=0;i<res.data.records.length;i++)
                            {
                                    this.data0.push({name:res.data.records[i]['courseName'],x:res.data.records[i]['x'],y:res.data.records[i]['y']});
                                    var pres = res.data.records[i]['preCourseName']
                                    if(pres==='-')continue;
                                    // console.log(pres)
                                    var spt = pres.split(',');
                                    for(var j=0;j<spt.length;j++) {
                                            this.links.push({source:spt[j],target:res.data.records[i]['courseName']});
                                    }
                            }

                            // console.log(this.data0)
                            // console.log(this.links)

                            // console.log(this.data0,this.company);

                            option = {
                                    title: {
                                            text: '计算机专业课程拓扑关系图',
                                            subtext: '数据截止至: 2021.08.10'
                                    },
                                    tooltip: {},
                                    toolbox: {  // 显示保存图片的按钮
                                            show: true,
                                            orient: 'horizontal',
                                            bottom: 10,
                                            right: 20,
                                            feature: {
                                                    saveAsImage: {}
                                            }
                                    },
                                    animationDurationUpdate: 1500,
                                    animationEasingUpdate: 'quinticInOut',
                                    series: [
                                            {
                                                    type: 'graph',
                                                    layout: 'none',
                                                    symbolSize: 50,
                                                    roam: false,  // false为禁止拖拽
                                                    label: {
                                                            show: true
                                                    },
                                                    edgeSymbol: ['circle', 'arrow'],
                                                    edgeSymbolSize: [4, 10],
                                                    edgeLabel: {
                                                            fontSize: 20
                                                    },
                                                    data : this.data0,
                                                    // data: [{
                                                    //         name: '节点1',
                                                    //         x: 300,
                                                    //         y: 300
                                                    // }, {
                                                    //         name: '节点2',
                                                    //         x: 800,
                                                    //         y: 300
                                                    // }, {
                                                    //         name: '节点3',
                                                    //         x: 550,
                                                    //         y: 100
                                                    // }, {
                                                    //         name: '节点4',
                                                    //         x: 550,
                                                    //         y: 500
                                                    // }],
                                                    links: this.links,
                                                    // links: [{
                                                    //         source: 0,
                                                    //         target: 3,
                                                    //         symbolSize: [5, 20],
                                                    //         label: {
                                                    //                 show: true
                                                    //         },
                                                    //         lineStyle: {
                                                    //                 width: 10,
                                                    //                 curveness: 0.2
                                                    //         }
                                                    // }, {
                                                    //         source: '节点2',
                                                    //         target: '节点1',
                                                    //         label: {
                                                    //                 show: true
                                                    //         },
                                                    //         lineStyle: {
                                                    //                 curveness: 0.2
                                                    //         }
                                                    // }, {
                                                    //         source: '节点1',
                                                    //         target: '节点3'
                                                    // }, {
                                                    //         source: '节点2',
                                                    //         target: '节点3'
                                                    // }, {
                                                    //         source: '节点2',
                                                    //         target: '节点4'
                                                    // }, {
                                                    //         source: '节点1',
                                                    //         target: '节点4'
                                                    // }],
                                                    lineStyle: {
                                                            opacity: 0.9,
                                                            width: 2,
                                                            curveness: 0
                                                    }
                                            }
                                    ]
                            };

                            option && myChart.setOption(option);
                    })

            },
        },

        mounted () {
            this.initCharts();
            console.log("mounted")
        }
    }
</script>

<style scoped>

</style>